frontend/pages/e/[uuid]/index.tsx (view raw)
1import {useState, useReducer, PropsWithChildren} from 'react';
2import {makeStyles} from '@material-ui/core/styles';
3import {useTranslation} from 'react-i18next';
4import EventLayout, { TabComponent } from '../../../layouts/Event';
5import TravelColumns from '../../../containers/TravelColumns';
6import NewTravelDialog from '../../../containers/NewTravelDialog';
7import VehicleChoiceDialog from '../../../containers/VehicleChoiceDialog';
8import {
9 EventByUuidDocument,
10 useFindUserVehiclesQuery,
11} from '../../../generated/graphql';
12import useProfile from '../../../hooks/useProfile';
13import Fab from '../../../containers/Fab';
14import useBannerStore from '../../../stores/useBannerStore';
15import {initializeApollo} from '../../../lib/apolloClient';
16
17interface Props {
18 eventUUID: string;
19}
20
21const Page = (props: PropsWithChildren<Props>) => {
22 return <EventLayout {...props} Tab={TravelsTab} />;
23};
24
25const TravelsTab: TabComponent = (props: {event}) => {
26 const bannerOffset = useBannerStore(s => s.offset);
27 const classes = useStyles({bannerOffset});
28 const {t} = useTranslation();
29 const {user} = useProfile();
30 const {data: {me: {profile: {vehicles = []} = {}} = {}} = {}, loading} =
31 useFindUserVehiclesQuery();
32 const [openNewTravelContext, toggleNewTravel] = useState({opened: false});
33 const [openVehicleChoice, toggleVehicleChoice] = useReducer(i => !i, false);
34
35 const addTravelClickHandler =
36 user && vehicles?.length != 0
37 ? toggleVehicleChoice
38 : () => toggleNewTravel({opened: true});
39
40 return (
41 <>
42 <TravelColumns toggle={addTravelClickHandler} />
43 <Fab
44 onClick={addTravelClickHandler}
45 aria-label="add-car"
46 color="primary"
47 className={classes.bottomRight}
48 >
49 {t('travel.creation.title')}
50 </Fab>
51 <NewTravelDialog
52 context={openNewTravelContext}
53 toggle={() => toggleNewTravel({opened: false})}
54 />
55 <VehicleChoiceDialog
56 open={openVehicleChoice}
57 toggle={toggleVehicleChoice}
58 toggleNewTravel={toggleNewTravel}
59 vehicles={vehicles}
60 />
61 </>
62 );
63};
64
65const useStyles = makeStyles(theme => ({
66 bottomRight: {
67 bottom: 0,
68 right: theme.spacing(6),
69
70 [theme.breakpoints.down('sm')]: {
71 right: theme.spacing(1),
72 bottom: 56,
73 },
74 },
75}));
76
77export async function getServerSideProps(ctx) {
78 const {uuid} = ctx.query;
79 const apolloClient = initializeApollo();
80 const {data = {}} = await apolloClient.query({
81 query: EventByUuidDocument,
82 variables: {uuid},
83 });
84 const {eventByUUID: event} = data;
85 const {host = ''} = ctx.req.headers;
86
87 return {
88 props: {
89 event,
90 eventUUID: uuid,
91 metas: {
92 title: event?.name || '',
93 url: `https://${host}${ctx.resolvedUrl}`,
94 },
95 },
96 };
97}
98
99export default Page;